import React from 'react';
import { Modal, Button } from 'antd';
import { WeaTools, WeaLocaleProvider, WeaTop, WeaDialog, WeaRightMenu, WeaTab } from 'ecCom';
import { WeaTableNew } from 'comsMobx';
import Confirm from './Confirm';

const getLabel = WeaLocaleProvider.getLabel;
const { WeaTable, TableStore } = WeaTableNew;
const tableStore = new TableStore();

class WeaNonStandard extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loading: false, templateType: '', templateName: '', selectedRowKeys: [], data: {} };
  }

  componentWillMount() {
    const { display, visible } = this.props;
    if (display == 'page' || visible) {
      this.onLoad();
    }
  }

  componentWillReceiveProps(nextProps) {
    const { visible } = nextProps;
    if (visible) {
      this.onLoad();
    }
  }

  render() {
    const { display, visible } = this.props;
    const { loading, templateType, templateName } = this.state;

    const Content = (
      <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_React.Fragment@xt9mm5`}>
        <Confirm ecId={`${this && this.props && this.props.ecId || ''}_Confirm@eh3z0x`} ref={confirmRef => (this.confirmRef = confirmRef)} />
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@808693`} datas={this.getRightMenus()}>
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@dlf4wm`}
            datas={[
              { key: '0', title: getLabel(387099, '已启用') },
              { key: '1', title: getLabel(32386, '未启用') },
            ]}
            keyParam="key"
            selectedKey={templateType}
            onChange={key => this.onLoad(key)}
            searchType={['base']}
            searchsBaseValue={templateName}
            onSearch={value => this.onLoad(templateType, value)}
          />
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@1bk2hp`} comsWeaTableStore={tableStore} rowSelection={this.getRowSelection()} scroll={{ y: 400 }} />
        </WeaRightMenu>
      </React.Fragment>
    );

    if (display == 'page') {
      return (
        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@6jqkw5`}
          loading={loading}
          title={getLabel(131290, '非标功能管理')}
          icon={<i className="icon-coms-currency" />}
          iconBgcolor="#217346"
          buttons={this.getButtons()}
        >
          {Content}
        </WeaTop>
      );
    }

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@z7pqyw`}
        visible={visible}
        loading={loading}
        title={getLabel(131290, '非标功能管理')}
        icon="icon-coms-currency"
        iconBgcolor="#217346"
        style={{ width: 790, height: 540 }}
        zIndex={100}
        hasScroll={true}
        buttons={this.getButtons()}
        onCancel={this.onCancel}
      >
        {Content}
      </WeaDialog>
    );
  }

  getButtons = () => {
    const { templateType, selectedRowKeys: keys } = this.state;

    const buttons = [];
    templateType == '0' &&
      buttons.push(
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@lp49e7`} type="primary" disabled={!(keys && keys.length)} onClick={this.onUse}>
          {getLabel(26471, '停用')}
        </Button>,
      );
    templateType == '1' &&
      buttons.push(
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ov2zoe`} type="primary" disabled={!(keys && keys.length)} onClick={this.onUse}>
          {getLabel(18095, '启用')}
        </Button>,
      );
    return buttons;
  };

  getRightMenus = () => {
    const { templateType, selectedRowKeys: keys } = this.state;

    const rightMenus = [];
    templateType == '0' &&
      rightMenus.push({
        key: '1',
        disabled: !(keys && keys.length),
        icon: <i className="icon-coms-Sealed" />,
        content: getLabel(26471, '停用'),
        onClick: this.onUse,
      });
    templateType == '1' &&
      rightMenus.push({
        key: '2',
        disabled: !(keys && keys.length),
        icon: <i className="icon-coms-deblock" />,
        content: getLabel(18095, '启用'),
        onClick: this.onUse,
      });
    return rightMenus;
  };

  getRowSelection = () => {
    const _self = this;
    return {
      onChange(selectedRowKeys) {
        _self.setState({ selectedRowKeys });
      },
    };
  };

  onLoad = (templateType = '0', templateName = '') => {
    this.setState({ loading: true, templateType, templateName });
    WeaTools.callApi('/api/portal/unStandardFuncInfo/list', 'POST', { templateType, templateName }).then((result) => {
      tableStore.getDatas(result.sessionkey, 1);
      tableStore.setSelectedRowKeys([]);
      this.setState({ loading: false, selectedRowKeys: [] });
    });
  };

  onUse = () => {
    const { templateType, selectedRowKeys: ids } = this.state;
    const method = { 0: 'stop', 1: 'start' }[templateType];

    this.setState({ loading: true });
    WeaTools.callApi('/api/portal/unStandardFuncInfo/upgrade', 'POST', { method, ids }).then((result) => {
      window.localStorage.removeItem('theme-frontEndMenu');
      window.localStorage.removeItem('theme-backEndMenu');

      this.confirmRef.onShow(templateType, result);
      this.setState({ loading: false });
      this.onLoad(templateType);
      if (templateType == '1') {
        Modal.confirm({
          title: getLabel(15172, '系统提示'),
          content: (
            <ul>
              <li>{getLabel(519279, '(1)、非标启用后必须重启Resin')}</li>
              <li>{getLabel(519280, '(2)、若为集群环境，需要每个节点进行启用')}</li>
              <li>{getLabel(519281, '(3)、若更换为其他客户的授权，必须重新申请非标并升级')}</li>
            </ul>
          ),
        });
      }
    });
  };

  onCancel = () => {
    this.props.onShow(false);
  };
}

export default WeaNonStandard;
